<template>
    <div :class="`detail-base-info ${mode}`">
        <div class="price">
            <div class="sale-price" :style="fontColor">
                <span class="label">￥</span>{{info.price_range[0] / 100}}
                <template v-if="info.price_range.length > 1 && (info.price_range[0] != info.price_range[1])">
                    -<span class="label">￥</span>{{info.price_range[1] / 100}}
                </template>
            </div>
            <!-- <div class="original-price"><span class="label">￥</span>555</div> -->
        </div>
        <div class="name title-color">{{info.name}}</div>
        <!-- <div class="month-sale-count">月售 {{info.sales}}</div> -->
    </div>
</template>

<script>
import { getShopGoodsPrice } from '@biztools/shop';
import ModeMixin from '@common/mixin';
export default {
    name: 'BaseInfo', // 基础信息
    mixins: [ModeMixin],
    props: {
        info: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    computed: {
    },
};
</script>

<style lang="less">
.detail-base-info {
    .flex-column();
    .p(@shop-gap-md);
    background-color: @white;
    .mode-white();
    .price {
        .flex();
        align-items: baseline;
        text-indent: -5px;
        .label {
            .m-r(-4);
        }
        .sale-price {
            color: @shop-price-color;
            font-size: @shop-font-size-lg;
            font-family: @font-family-number;
        }
        .original-price {
            color: @tip-color;
            text-decoration: line-through;
            .m-l(@gap);
            font-size: @shop-font-size;
        }
    }
    .name {
        font-size: @shop-font-size-md;
        .m-t(@gap);
    }
    .month-sale-count {
        font-size: @shop-font-size;
        color: @tip-color;
        .m-t(@gap-sm);
    }
}
</style>
